<template>
	<view>
		<view class="top">
			<view class="title">经营统计</view>
		</view>

		<view class="body">
			<!-- 日期选择部分 -->
			<view class="date-filter">
				<view class="date-tabs">
					<view class="date-left">
						<view class="date-tab" :class="{ active: activeTab === 'today' }" @tap="switchTab('today')">今日
						</view>
						<view class="date-tab" :class="{ active: activeTab === 'yesterday' }"
							@tap="switchTab('yesterday')">昨日</view>
					</view>
					<view class="custom-date-wrapper">
						<view class="date-tab custom-date" @tap="toggleDateOptions">
							<text>自定义</text>
							<text class="custom-icon">▼</text>
						</view>
						<view class="date-options" v-if="showDateOptions">
							<view class="date-option" v-for="(option, index) in dateOptions" :key="index"
								@tap="selectDate(index)">
								{{ option }}
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="stats-container">
				<view class="stats-item">
					<image src="../../../static/msj/统计.png" class="stats-icon"></image>
					<view class="stats-value">¥2066.56</view>
					<view class="stats-label">收入</view>
				</view>
				<view class="stats-item">
					<image src="../../../static/msj/卡券.png" class="stats-icon"></image>
					<view class="stats-value">53</view>
					<view class="stats-label">订单量</view>
				</view>
			</view>
		</view>

		<view class="income">
			<view class="income-title">收入分布</view>
			<view class="chart-wrapper">
				<view class="chart-container">
					<qiun-data-charts type="ring" :opts="opts" :chartData="chartData" :canvas2d="true"
						canvasId="pieChart" />
				</view>
				<view class="chart-info">
					<view class="info-item">
						<view class="info-row">
							<text class="info-color" style="background-color: #8B7EF8;"></text>
							<text class="info-text">洗车</text>
							<text class="info-value">占比26%</text>
						</view>
					</view>
					<view class="info-item">
						<view class="info-row">
							<text class="info-color" style="background-color: #FF7B9C;"></text>
							<text class="info-text">保养</text>
							<text class="info-value">占比74%</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="content" style="margin-top: 12px;">
			<view >
				<span style="font-size: 16px;">订单分布</span>
				<view style="height: 4px;background-color: #e3e3e366;margin-bottom: 12px;margin-top: 6px;"></view>
				<view class="charts-box">
					<qiun-data-charts type="column" :opts="opts1" :chartData="chartData1" />
				</view>
			</view>
		</view>
		

	</view>
</template>


<script>
	export default {
		data() {
			return {
				chartData1: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['column'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts1: {
					color: ["#FAC858", "#EE6666", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 15, 0, 5],
					enableScroll: false,
					legend: {},
					xAxis: {
						disableGrid: true
					},
					yAxis: {
						data: [{
							min: 0
						}]
					},
					extra: {
						column: {
							type: "group",
							width: 30,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08,
							linearType: "custom",
							seriesGap: 5,
							linearOpacity: 0.5,
							barBorderCircle: true,
							customColor: [
								"#FA7D8D",
								"#EB88E2"
							]
						}
					}
				},
				activeTab: 'today',
				showDateOptions: false,
				dateOptions: ['一周内', '一个月内', '三个月内', '半年内', '一年内'],
				chartData: {
					series: [{
						data: [{
								name: "洗车",
								value: 26,
								color: "#8B7EF8"
							},
							{
								name: "保养",
								value: 74,
								color: "#FF7B9C"
							}
						]
					}]
				},
				opts: {
					padding: [15, 15, 0, 15],
					legend: {
						show: false
					},
					series: [{
						center: ['30%', '50%'],
						radius: ['65%', '80%'],
						type: 'ring',
						avoidLabelOverlap: true,
						label: {
							show: true,
							position: 'center',
							formatter: '{b}',
							color: '#333',
							fontSize: 14
						},
						itemStyle: {
							borderRadius: 4,
							borderColor: '#fff',
							borderWidth: 2
						},
						emphasis: {
							scale: false,
							label: {
								show: true,
								fontSize: 14,
								fontWeight: 'bold'
							}
						}
					}],
					extra: {
						ring: {
							ringWidth: 30,
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: true,
							borderWidth: 3,
							borderColor: "#FFFFFF",
							customLabel: true
						}
					}
				},
			}
		},
		onReady() {
			this.getServerData1();
		},
		methods: {
			getServerData1() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						categories: ["维修", "保养", "洗车"],
						series: [{
								name: "目标值",
								data: [235, 336, 231]
							},
						]
					};
					this.chartData1 = JSON.parse(JSON.stringify(res));
				}, 500);
			},
		
			switchTab(tab) {
				this.activeTab = tab;
			},

			toggleDateOptions() {
				this.showDateOptions = !this.showDateOptions;
			},
			selectDate(index) {
				console.log('选择了:', this.dateOptions[index]);
				this.showDateOptions = false;
			}
		}
	}
</script>

<style scoped>
	.content {
		position: relative;
		top: -152px;
		left: 22.5rpx;
		border-radius: 20px;
		width: 94%;
		background-color: white;
		padding: 28px 16px;
		box-sizing: border-box;
	}
	
	.top {
		height: 300rpx;
		width: 100%;
		background-color: #3385fd;
		padding-top: 30px;
	}

	.title {
		width: 100%;
		color: #fff;
		font-size: 33rpx;
		text-align: center;
	}

	.body {
		position: relative;
		margin: 0 auto;
		width: 98%;
		top: -190px;
		height: 400rpx;
		border-radius: 28px;
		background-color: white;
		box-sizing: border-box;
		padding-top: 30rpx;
	}

	.date-filter {
		padding: 0 20rpx;
		margin-bottom: 30rpx;
	}

	.date-tabs {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 30rpx;
		position: relative;
	}

	.date-left {
		display: flex;
		background: #f5f5f5;
		border-radius: 30rpx;
		padding: 6rpx;
		margin: 0 auto;
	}

	.date-tab {
		padding: 12rpx 40rpx;
		font-size: 28rpx;
		color: #666;
		border-radius: 30rpx;
		transition: all 0.3s;
	}

	.date-left .date-tab {
		position: relative;
		z-index: 1;
	}

	.date-left .date-tab.active {
		background: #3385fd;
		color: #fff;
	}

	.custom-date-wrapper {
		position: absolute;
		right: 30rpx;
	}

	.custom-date {
		display: flex;
		align-items: center;
		color: #666;
		padding: 12rpx 20rpx;
	}

	.custom-icon {
		font-size: 20rpx;
		margin-left: 4rpx;
	}

	.date-options {
		position: absolute;
		top: 100%;
		right: 0;
		width: 200rpx;
		background: #fff;
		border-radius: 12rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
		z-index: 100;
		margin-top: 10rpx;
	}

	.date-option {
		padding: 20rpx;
		text-align: center;
		font-size: 28rpx;
		color: #333;
		border-bottom: 1rpx solid #eee;
	}

	.date-option:last-child {
		border-bottom: none;
	}

	.date-option:active {
		background-color: #f5f5f5;
	}

	.stats-container {
		display: flex;
		justify-content: space-around;
		padding: 30rpx 20rpx;

		border-radius: 20rpx;
		margin: 20rpx;

	}

	.stats-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20rpx;
	}

	.stats-icon {
		width: 60rpx;
		height: 60rpx;
		margin-bottom: 10rpx;
	}

	.stats-value {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 6rpx;
	}

	.stats-label {
		font-size: 26rpx;
		color: #666;
	}

	.income {
		position: relative;
		margin: 0 auto;
		width: 98%;
		top: -100px;
		height: 400rpx;
		border-radius: 28px;
		background-color: white;
		box-sizing: border-box;
		padding-top: 30rpx;
	}

	.income {
		position: relative;
		margin: 0 auto;
		width: 98%;
		top: -180px;
		min-height: 500rpx;
		border-radius: 28px;
		background-color: white;
		box-sizing: border-box;
		padding: 30rpx;
	}

	.income-title {
		font-size: 32rpx;
		color: #333;
		font-weight: 500;
		margin-bottom: 30rpx;
	}

	.chart-wrapper {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
	}

	.chart-container {
		width: 50%;
		height: 400rpx;
	}

	.chart-info {
		width: 45%;
		padding-left: 20rpx;
	}

	.info-item {
		margin-bottom: 30rpx;
	}

	.info-row {
		display: flex;
		align-items: center;
	}

	.info-color {
		width: 24rpx;
		height: 24rpx;
		border-radius: 4rpx;
		margin-right: 12rpx;
	}

	.info-text {
		font-size: 28rpx;
		color: #333;
		margin-right: 1rpx;
	}

	.info-value {
		font-size: 26rpx;
		color: #666;
		margin-left: auto;
	}

	.order {
		position: relative;
		margin: 0 auto;
		width: 98%;
		top: -170px;
		min-height: 500rpx;
		border-radius: 28px;
		background-color: white;
		box-sizing: border-box;
		padding: 30rpx;

	}

	.order-title {
		font-size: 32rpx;
		color: #333;
		font-weight: 500;
		margin-bottom: 30rpx;
	}

	.order-content {
		display: flex;
		position: relative;
	}

	.chart-wrapper {
		flex: 1;
		height: 400rpx;
	}

	.legend-container {
		position: absolute;
		right: 30rpx;
		top: 50%;
		transform: translateY(-50%);
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.legend-item {
		display: flex;
		align-items: center;
		white-space: nowrap;
	}

	.legend-line {
		width: 30rpx;
		height: 4rpx;
		margin-right: 10rpx;
	}

	.legend-text {
		font-size: 24rpx;
		color: #666;
	}
</style>

